<template>
    <div>
        <h1>食谱添加</h1>
        <table border="1px" class="table table-bordered">
            <tbody>
                <tr>
                    <td>食谱标题</td>
                    <td>
                        <input type="text" v-model="info.EatName">
                    </td>
                </tr>
                <tr>
                    <td>菜谱封面</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="info.Photo" width="120px" height="100px" v-if="info.Photo != ''">
                    </td>
                </tr>
                <tr>
                    <td>标签</td>
                    <td>
                        <input type="text" v-model="info.Bqian">
                    </td>
                </tr>
                <tr>
                    <td>食谱类型</td>
                    <td>
                        <select v-model="info.TypeName">
                            <option value="">请选择</option>
                            <option :value="a.TypeName" v-for="a in h">{{ a.TypeName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" :value="1" v-model="info.State"> 发布
                        <input type="radio" :value="0" v-model="info.State"> 不发布
                    </td>
                </tr>
                <tr>
                    <td>营业时间</td>
                    <td>
                        <input type="time" v-model="info.GoTime">
                    </td>
                </tr>
                <tr>
                    <td>菜谱详情</td>
                    <td>
                        <textarea v-model="info.Aera"></textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button class="btn btn-primary" @click="ok">提交</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router'
const router = useRouter();

onMounted(() => {
    bind();
})

let h: any = ref([])

let info: any = reactive({
    "EatName": "",
    "Photo": "",
    "Bqian": "",
    "TypeName": "",
    "State": 1,
    "GoTime": "",
    "Aera": ""
})

//图片上传
const img = (e: any) => {
    console.log(e);
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj);
    axios({
        url: 'https://localhost:7118/api/Eat/Img',
        method: 'post',
        data: f
    })
        .then((res) => {
            if (res.data != "") {
                info.Photo = res.data;
                alert('上传成功!');
            }
            else {
                alert('上传失败!');
            }
        })
}

//绑定
const bind = () => {
    axios({
        url: 'https://localhost:7118/api/Eat/Bind',
        method: 'get'
    })
        .then((res) => {
            h.value = res.data
        })
}

//添加
const ok = () => {
    if(info.EatName==""){
        alert('食谱标题不能为空!');
        return;
    }
    if(info.Photo==""){
        alert('菜谱封面不能为空!');
        return;
    }
    if(info.Bqian==""){
        alert('标签不能为空!');
        return;
    }
    if(info.TypeName==""){
        alert('食谱类型不能为空!');
        return;
    }
    if(info.GoTime==""){
        alert('营业时间不能为空!');
        return;
    }
    if(info.Aera==""){
        alert('菜谱详情不能为空!');
        return;
    }
    axios({
        url: 'https://localhost:7118/api/Eat/AddEat',
        method: 'post',
        data: info
    })
        .then((res) => {
            if (res.data > 0) {
                alert('添加成功!');
                router.push('/eatshow')
            }
            else {
                alert('添加失败!');
            }
        })
}
</script>

<style scoped></style>